import './Main.scss'

import React from 'react'

import NavHeader from 'component/NavHeader/NavHeader'
class Main extends React.Component {
    constructor(props) {
        super(props)
        this.maxCount = 140

        this.state = {
            count: this.maxCount,
            startIndex: 0
        }
    }

    renderStart() {
        let array = [];
        for (let i = 0; i < 5; i++) {
            let cls = i >= this.state.startIndex ? "start-item" : "start-item light"
            array.push(
                <div key={i} className={cls} onClick={() => this.doEva(i)}></div>
            )
        }
        return array
    }
    doEva(index) {
        this.setState({
            startIndex: index + 1
        })
    }
    onInput(value) {
        let num = value.length;
        if (!this.chineseInputing) {
            this.setState({
                count: this.maxCount - num
            })
        }
    }
    componentDidMount() {
        this.commentInput.addEventListener("compositionstart", () => {
            this.chineseInputing = true
        })
        this.commentInput.addEventListener("compositionend", (e) => {
            this.chineseInputing = false
            this.onInput(e.target.value)
        })
    }
    render() {
        return (
            <div className="content">
                <NavHeader title="评价"></NavHeader>
                <div className="eva-content">
                    <div className="star-area">
                        {this.renderStart()}
                    </div>
                    <div className="comment">
                        <textarea
                            className="comment-input"
                            maxLength="140"
                            placeholder="亲，菜品的口味如何，商家的服务是否周到?"
                            onChange={(e) => this.onInput(e.target.value)}
                            ref={(ref) => this.commentInput = ref}
                        ></textarea>
                        <span className="count">{this.state.count}</span>
                    </div>
                    <p className="one-line product-name">+厚切鸡排 香辣口水鸡饭，重辣</p>
                </div>
                <div className="submit"> 提交评价</div>
            </div>
        )
    }
}
export default Main